<template>
  <div class="ticket-purchase">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h2 class="page-title">
          <el-icon class="title-icon"><Tickets /></el-icon>
          购票系统
        </h2>
        <p class="page-subtitle">选择出行日期，查询车次信息</p>
      </div>
    </div>

    <!-- 车次搜索区域 -->
    <el-card class="search-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <el-icon class="header-icon"><Search /></el-icon>
          <span class="header-title">车次查询</span>
        </div>
      </template>

      <el-form :model="searchForm" class="search-form">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="出发站">
              <el-select
                v-model="searchForm.startStationId"
                placeholder="请选择出发站"
                clearable
                filterable
                size="large"
              >
                <el-option
                  v-for="station in stations"
                  :key="station.id"
                  :label="station.stationName"
                  :value="station.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="到达站">
              <el-select
                v-model="searchForm.endStationId"
                placeholder="请选择到达站"
                clearable
                filterable
                size="large"
              >
                <el-option
                  v-for="station in stations"
                  :key="station.id"
                  :label="station.stationName"
                  :value="station.id"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label="出行日期">
              <el-date-picker
                v-model="searchForm.travelDate"
                type="date"
                placeholder="请选择出行日期"
                value-format="YYYY-MM-DD"
                :disabled-date="disabledDate"
                size="large"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>

          <el-col :xs="24" :sm="12" :md="6">
            <el-form-item label=" " class="button-group">
              <el-button type="primary" size="large" @click="searchTrains" :icon="Search">
                查询直达
              </el-button>
              <el-button type="success" size="large" @click="searchTransferRoutes" :icon="Connection">
                查询换乘
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 直达车次列表 -->
    <div v-if="trains.length > 0" class="train-list-container">
      <div class="list-header">
        <h3 class="list-title">
          <el-icon><Van /></el-icon>
          直达车次
        </h3>
        <el-tag type="info" size="large">共 {{ trains.length }} 个车次</el-tag>
      </div>

      <div class="train-cards">
        <el-card
          v-for="train in trains"
          :key="train.id"
          class="train-card"
          shadow="hover"
        >
          <div class="train-card-content">
            <!-- 车次号 -->
            <div class="train-number">
              <el-tag type="primary" size="large" effect="dark">{{ train.trainNumber }}</el-tag>
            </div>

            <!-- 时间和站点信息 -->
            <div class="train-route">
              <div class="route-station start">
                <div class="station-time">{{ train.departureTime }}</div>
                <div class="station-name">{{ train.startStationName }}</div>
              </div>

              <div class="route-line">
                <el-icon class="route-icon"><Right /></el-icon>
                <div class="route-path"></div>
                <el-icon class="route-icon"><Right /></el-icon>
              </div>

              <div class="route-station end">
                <div class="station-time">{{ train.arrivalTime }}</div>
                <div class="station-name">{{ train.endStationName }}</div>
              </div>
            </div>

            <!-- 出行日期和操作 -->
            <div class="train-actions">
              <div class="travel-date">
                <el-icon><Calendar /></el-icon>
                <span>{{ train.travelDate }}</span>
              </div>
              <el-button type="primary" @click="selectTrain(train)" :icon="Tickets">
                选择座位
              </el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 换乘路线列表 -->
    <div v-if="transferRoutes.length > 0" class="transfer-list-container">
      <div class="list-header">
        <h3 class="list-title">
          <el-icon><Connection /></el-icon>
          换乘路线
        </h3>
        <el-tag type="warning" size="large">共 {{ transferRoutes.length }} 个方案</el-tag>
      </div>

      <div class="transfer-cards">
        <el-card
          v-for="(route, index) in transferRoutes"
          :key="index"
          class="transfer-card"
          shadow="hover"
        >
          <div class="transfer-header">
            <el-tag type="info" size="small">方案 {{ index + 1 }}</el-tag>
            <div class="transfer-meta">
              <el-tag type="warning" size="small">
                <el-icon><Clock /></el-icon>
                {{ formatDuration(route.totalDuration) }}
              </el-tag>
              <el-tag type="success" size="small">
                <el-icon><Money /></el-icon>
                ¥{{ route.totalPrice.toFixed(2) }}
              </el-tag>
            </div>
          </div>

          <div class="transfer-content">
            <!-- 第一段行程 -->
            <div class="transfer-segment">
              <div class="segment-label">
                <el-tag size="small">{{ route.firstTrain.trainNumber }}</el-tag>
                <span class="segment-text">第一段</span>
              </div>
              <div class="segment-route">
                <div class="segment-station">
                  <div class="station-time">{{ route.firstTrain.departureTime }}</div>
                  <div class="station-name">{{ route.firstTrain.startStationName }}</div>
                </div>
                <div class="segment-arrow">
                  <el-icon><Right /></el-icon>
                </div>
                <div class="segment-station">
                  <div class="station-time">{{ route.firstTrain.arrivalTime }}</div>
                  <div class="station-name">{{ route.firstTrain.endStationName }}</div>
                </div>
              </div>
            </div>

            <!-- 换乘等待 -->
            <div class="transfer-wait">
              <el-divider>
                <el-tag type="warning" size="small">
                  <el-icon><Timer /></el-icon>
                  {{ route.transferStationName }}中转 · 等待{{ route.transferWaitTime }}
                </el-tag>
              </el-divider>
            </div>

            <!-- 第二段行程 -->
            <div class="transfer-segment">
              <div class="segment-label">
                <el-tag size="small">{{ route.secondTrain.trainNumber }}</el-tag>
                <span class="segment-text">第二段</span>
              </div>
              <div class="segment-route">
                <div class="segment-station">
                  <div class="station-time">{{ route.secondTrain.departureTime }}</div>
                  <div class="station-name">{{ route.secondTrain.startStationName }}</div>
                </div>
                <div class="segment-arrow">
                  <el-icon><Right /></el-icon>
                </div>
                <div class="segment-station">
                  <div class="station-time">{{ route.secondTrain.arrivalTime }}</div>
                  <div class="station-name">{{ route.secondTrain.endStationName }}</div>
                </div>
              </div>
            </div>
          </div>

          <div class="transfer-footer">
            <el-button type="primary" @click="selectTransferRoute(route)">
              选择此方案
            </el-button>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 座位选择对话框 -->
    <el-dialog v-model="seatDialogVisible" title="选择座位" width="80%" :close-on-click-modal="false">
      <div v-if="selectedTrain">
        <seat-selector
          :train="selectedTrain"
          :start-station-id="searchForm.startStationId!"
          :end-station-id="searchForm.endStationId!"
          @seat-selected="handleSeatSelected"
        />
      </div>
    </el-dialog>

    <!-- 换乘座位选择对话框 -->
    <el-dialog
      v-model="transferSeatDialogVisible"
      title="选择换乘座位"
      width="90%"
      :close-on-click-modal="false"
    >
      <div v-if="selectedTransferRoute">
        <transfer-seat-selector
          :transfer-route="selectedTransferRoute"
          :start-station-id="searchForm.startStationId!"
          :end-station-id="searchForm.endStationId!"
          @seat-selected="handleTransferSeatSelected"
        />
      </div>
    </el-dialog>

    <!-- 购票信息填写对话框 -->
    <el-dialog
      v-model="purchaseDialogVisible"
      title="填写乘车人信息"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="selected-info" v-if="selectedSeat">
        <el-descriptions title="选择的座位信息" :column="2" border>
          <el-descriptions-item label="车次">{{ selectedTrain?.trainNumber }}</el-descriptions-item>
          <el-descriptions-item label="座位"
            >{{ selectedSeat.carriageNumber }}车厢{{ selectedSeat.seatNumber }}座</el-descriptions-item
          >
          <el-descriptions-item label="出发站">{{
            getStationName(searchForm.startStationId!)
          }}</el-descriptions-item>
          <el-descriptions-item label="到达站">{{
            getStationName(searchForm.endStationId!)
          }}</el-descriptions-item>
          <el-descriptions-item label="价格">¥{{ selectedSeat.price }}</el-descriptions-item>
          <el-descriptions-item label="出行日期">{{ searchForm.travelDate }}</el-descriptions-item>
        </el-descriptions>
      </div>

      <el-form
        :model="passengerForm"
        :rules="passengerRules"
        ref="passengerFormRef"
        label-width="100px"
        class="passenger-form"
      >
        <el-form-item label="姓名" prop="passengerName">
          <el-input v-model="passengerForm.passengerName" placeholder="请输入乘车人姓名" />
        </el-form-item>
        <el-form-item label="身份证号" prop="passengerIdCard">
          <el-input v-model="passengerForm.passengerIdCard" placeholder="请输入身份证号" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="purchaseDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="purchaseTicket" :loading="purchasing">
            确认购票
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Tickets,
  Search,
  Van,
  Right,
  Calendar,
  Connection,
  Clock,
  Money,
  Timer
} from '@element-plus/icons-vue'
import { trainApi, stationApi, ticketApi } from '@/api/train'
import { useUserStore } from '@/stores/user'
import type { Train, Station, Seat, TicketInfo, TransferRoute, TransferTicketInfo } from '@/types/train'
import SeatSelector from './components/SeatSelector.vue'
import TransferSeatSelector from './components/TransferSeatSelector.vue'

const userStore = useUserStore()

const trains = ref<Train[]>([])
const transferRoutes = ref<TransferRoute[]>([])
const stations = ref<Station[]>([])
const selectedTrain = ref<Train | null>(null)
const selectedTransferRoute = ref<TransferRoute | null>(null)
const selectedSeat = ref<Seat | null>(null)
const selectedFirstSeat = ref<Seat | null>(null)
const selectedSecondSeat = ref<Seat | null>(null)
const seatDialogVisible = ref(false)
const transferSeatDialogVisible = ref(false)
const purchaseDialogVisible = ref(false)
const purchasing = ref(false)
const passengerFormRef = ref()

const searchForm = reactive({
  startStationId: null as number | null,
  endStationId: null as number | null,
  travelDate: ''
})

const passengerForm = reactive({
  passengerName: '',
  passengerIdCard: ''
})

const passengerRules = {
  passengerName: [
    { required: true, message: '请输入乘车人姓名', trigger: 'blur' },
    { min: 2, max: 50, message: '姓名长度在2到50个字符', trigger: 'blur' }
  ],
  passengerIdCard: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    {
      pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
      message: '身份证号格式不正确',
      trigger: 'blur'
    }
  ]
}

// 获取车站列表
const fetchStations = async () => {
  try {
    const response = await stationApi.getAllStations()
    if (response.success) {
      stations.value = response.data
    } else {
      ElMessage.error(response.message)
    }
  } catch (error) {
    console.error('获取车站列表失败:', error)
    ElMessage.error('获取车站列表失败')
  }
}

// 搜索车次
const searchTrains = async () => {
  if (!validateSearchForm()) return

  try {
    transferRoutes.value = []

    const response = await trainApi.searchTrains(
      searchForm.startStationId!,
      searchForm.endStationId!,
      searchForm.travelDate
    )
    if (response.success) {
      trains.value = response.data
      if (trains.value.length === 0) {
        ElMessage.info('暂无符合条件的直达车次')
      }
    } else {
      ElMessage.error(response.message)
    }
  } catch (error) {
    console.error('搜索车次失败:', error)
    ElMessage.error('搜索车次失败')
  }
}

// 搜索换乘路线
const searchTransferRoutes = async () => {
  if (!validateSearchForm()) return

  try {
    trains.value = []

    const response = await trainApi.searchTransferRoutes(
      searchForm.startStationId!,
      searchForm.endStationId!,
      searchForm.travelDate,
      120
    )
    if (response.success) {
      transferRoutes.value = response.data
      if (transferRoutes.value.length === 0) {
        ElMessage.info('暂无符合条件的换乘路线')
      } else {
        ElMessage.success(`找到 ${transferRoutes.value.length} 个换乘方案`)
      }
    } else {
      ElMessage.error(response.message)
    }
  } catch (error) {
    console.error('搜索换乘路线失败:', error)
    ElMessage.error('搜索换乘路线失败')
  }
}

// 验证搜索表单
const validateSearchForm = () => {
  if (!searchForm.startStationId || !searchForm.endStationId || !searchForm.travelDate) {
    ElMessage.warning('请完整填写搜索条件')
    return false
  }

  if (searchForm.startStationId === searchForm.endStationId) {
    ElMessage.warning('出发站和到达站不能相同')
    return false
  }

  return true
}

// 选择车次
const selectTrain = (train: Train) => {
  selectedTrain.value = train
  selectedTransferRoute.value = null
  seatDialogVisible.value = true
}

// 选择换乘路线
const selectTransferRoute = (route: TransferRoute) => {
  selectedTransferRoute.value = route
  selectedTrain.value = null
  transferSeatDialogVisible.value = true
}

// 格式化时长显示
const formatDuration = (minutes: number) => {
  const hours = Math.floor(minutes / 60)
  const mins = minutes % 60
  return `${hours}小时${mins}分钟`
}

// 处理换乘座位选择
const handleTransferSeatSelected = (
  firstSeat: Seat,
  secondSeat: Seat,
  passengerInfo: { passengerName: string; passengerIdCard: string }
) => {
  selectedFirstSeat.value = firstSeat
  selectedSecondSeat.value = secondSeat

  passengerForm.passengerName = passengerInfo.passengerName
  passengerForm.passengerIdCard = passengerInfo.passengerIdCard

  transferSeatDialogVisible.value = false
  purchaseTransferTickets(passengerInfo)
}

// 购买换乘票务
const purchaseTransferTickets = async (passengerInfo: {
  passengerName: string
  passengerIdCard: string
}) => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    return
  }

  if (!selectedTransferRoute.value || !selectedFirstSeat.value || !selectedSecondSeat.value) {
    ElMessage.error('座位选择信息不完整')
    return
  }

  try {
    purchasing.value = true

    const transferTicketInfo: TransferTicketInfo = {
      firstTrainId: selectedTransferRoute.value.firstTrain.id,
      firstSeatId: selectedFirstSeat.value.id,
      secondTrainId: selectedTransferRoute.value.secondTrain.id,
      secondSeatId: selectedSecondSeat.value.id,
      passengerName: passengerInfo.passengerName,
      passengerIdCard: passengerInfo.passengerIdCard,
      startStationId: searchForm.startStationId!,
      transferStationId: selectedTransferRoute.value.transferStationId,
      endStationId: searchForm.endStationId!
    }

    const response = await ticketApi.purchaseTransferTickets({
      userId: userStore.currentUser!.id,
      transferTickets: [transferTicketInfo]
    })

    if (response.success) {
      ElMessage.success('换乘票务购买成功！')

      await ElMessageBox.alert(
        `订单号：${response.data.orderNumber}\n总金额：¥${response.data.totalAmount}\n订单类型：换乘票务`,
        '购票成功',
        { type: 'success' }
      )

      resetForms()
    } else {
      ElMessage.error(response.message)
    }
  } catch (error) {
    console.error('购买换乘票务失败:', error)
    ElMessage.error('购买换乘票务失败')
  } finally {
    purchasing.value = false
  }
}

// 处理座位选择
const handleSeatSelected = (seat: Seat) => {
  selectedSeat.value = seat
  seatDialogVisible.value = false
  purchaseDialogVisible.value = true

  if (userStore.currentUser) {
    passengerForm.passengerName = userStore.currentUser.realName
    passengerForm.passengerIdCard = userStore.currentUser.idCard
  }
}

// 购票
const purchaseTicket = async () => {
  if (!userStore.isLoggedIn) {
    ElMessage.warning('请先登录')
    return
  }

  try {
    const valid = await passengerFormRef.value.validate()
    if (!valid) return

    purchasing.value = true

    const ticketInfo: TicketInfo = {
      trainId: selectedTrain.value!.id,
      seatId: selectedSeat.value!.id,
      passengerName: passengerForm.passengerName,
      passengerIdCard: passengerForm.passengerIdCard,
      startStationId: searchForm.startStationId!,
      endStationId: searchForm.endStationId!
    }

    const response = await ticketApi.purchaseTickets({
      userId: userStore.currentUser!.id,
      tickets: [ticketInfo]
    })

    if (response.success) {
      ElMessage.success('购票成功！')
      purchaseDialogVisible.value = false

      await ElMessageBox.alert(
        `订单号：${response.data.orderNumber}\n总金额：¥${response.data.totalAmount}`,
        '购票成功',
        { type: 'success' }
      )

      resetForms()
    } else {
      ElMessage.error(response.message)
    }
  } catch (error) {
    console.error('购票失败:', error)
    ElMessage.error('购票失败')
  } finally {
    purchasing.value = false
  }
}

// 重置表单
const resetForms = () => {
  Object.assign(passengerForm, {
    passengerName: '',
    passengerIdCard: ''
  })
  selectedTrain.value = null
  selectedTransferRoute.value = null
  selectedSeat.value = null
  selectedFirstSeat.value = null
  selectedSecondSeat.value = null
  seatDialogVisible.value = false
  transferSeatDialogVisible.value = false
  purchaseDialogVisible.value = false
}

// 获取车站名称
const getStationName = (stationId: number) => {
  const station = stations.value.find((s) => s.id === stationId)
  return station ? station.stationName : ''
}

// 禁用日期（不能选择过去的日期）
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
}

onMounted(() => {
  fetchStations()
})
</script>

<style scoped>
.ticket-purchase {
  min-height: calc(100vh - 200px);
}

/* ==================== 页面头部 ==================== */

.page-header {
  margin-bottom: var(--spacing-6);
  padding: var(--spacing-6);
  background: var(--gradient-soft);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

.header-content {
  text-align: center;
}

.page-title {
  margin: 0 0 var(--spacing-2) 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-3);
}

.title-icon {
  font-size: var(--font-size-3xl);
  color: var(--primary-color);
}

.page-subtitle {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

/* ==================== 搜索卡片 ==================== */

.search-card {
  margin-bottom: var(--spacing-6);
  border: 2px solid var(--border-color);
  transition: all var(--transition-base);
}

.search-card:hover {
  border-color: var(--primary-light);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.header-icon {
  font-size: var(--font-size-xl);
  color: var(--primary-color);
}

.header-title {
  color: var(--text-primary);
}

.search-form {
  padding: var(--spacing-4) 0;
}

.search-form :deep(.el-form-item__label) {
  font-weight: var(--font-weight-semibold);
  color: var(--text-primary);
}

.button-group {
  display: flex;
  gap: var(--spacing-2);
}

.button-group :deep(.el-form-item__content) {
  display: flex;
  gap: var(--spacing-2);
  flex-wrap: wrap;
}

/* ==================== 列表容器 ==================== */

.train-list-container,
.transfer-list-container {
  margin-bottom: var(--spacing-6);
}

.list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-4);
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.list-title {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}

.list-title .el-icon {
  color: var(--primary-color);
  font-size: var(--font-size-2xl);
}

/* ==================== 车次卡片 ==================== */

.train-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
  gap: var(--spacing-4);
}

.train-card {
  border: 2px solid var(--border-color);
  transition: all var(--transition-base);
  cursor: pointer;
}

.train-card:hover {
  border-color: var(--primary-color);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.train-card-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.train-number {
  display: flex;
  justify-content: center;
}

.train-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  background: var(--gradient-light);
  border-radius: var(--radius-lg);
}

.route-station {
  flex: 1;
  text-align: center;
}

.route-station.start {
  text-align: left;
}

.route-station.end {
  text-align: right;
}

.station-time {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--spacing-1);
}

.station-name {
  font-size: var(--font-size-lg);
  color: var(--text-secondary);
  font-weight: var(--font-weight-medium);
}

.route-line {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-2);
  padding: 0 var(--spacing-4);
}

.route-icon {
  font-size: var(--font-size-xl);
  color: var(--primary-color);
}

.route-path {
  flex: 1;
  height: 2px;
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

.train-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--border-color);
}

.travel-date {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  font-size: var(--font-size-base);
  color: var(--text-secondary);
}

.travel-date .el-icon {
  color: var(--info-color);
}

/* ==================== 换乘卡片 ==================== */

.transfer-cards {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}

.transfer-card {
  border: 2px solid var(--border-color);
  transition: all var(--transition-base);
}

.transfer-card:hover {
  border-color: var(--warning-color);
  box-shadow: var(--shadow-lg);
}

.transfer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-4);
  padding-bottom: var(--spacing-3);
  border-bottom: 2px solid var(--border-light);
}

.transfer-meta {
  display: flex;
  gap: var(--spacing-2);
}

.transfer-content {
  margin-bottom: var(--spacing-4);
}

.transfer-segment {
  padding: var(--spacing-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--spacing-3);
}

.segment-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  margin-bottom: var(--spacing-3);
}

.segment-text {
  font-size: var(--font-size-sm);
  color: var(--text-tertiary);
}

.segment-route {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
}

.segment-station {
  flex: 1;
}

.segment-arrow {
  font-size: var(--font-size-xl);
  color: var(--primary-color);
}

.transfer-wait {
  margin: var(--spacing-4) 0;
}

.transfer-footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--spacing-3);
  border-top: 1px solid var(--border-color);
}

/* ==================== 对话框样式 ==================== */

.selected-info {
  margin-bottom: var(--spacing-6);
}

.passenger-form {
  margin-top: var(--spacing-6);
}

/* ==================== 响应式 ==================== */

@media (max-width: 1024px) {
  .train-cards {
    grid-template-columns: 1fr;
  }

  .train-route {
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .route-line {
    width: 100%;
    flex-direction: column;
    padding: var(--spacing-2) 0;
  }

  .route-path {
    width: 2px;
    height: 30px;
  }

  .route-station {
    text-align: center !important;
  }

  .button-group :deep(.el-form-item__content) {
    width: 100%;
  }

  .button-group :deep(.el-button) {
    flex: 1;
  }
}

@media (max-width: 768px) {
  .page-title {
    font-size: var(--font-size-2xl);
  }

  .station-time {
    font-size: var(--font-size-xl);
  }

  .station-name {
    font-size: var(--font-size-base);
  }

  .train-actions {
    flex-direction: column;
    gap: var(--spacing-3);
  }

  .transfer-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-2);
  }

  .segment-route {
    flex-direction: column;
  }
}
</style>
